<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
  >
    <el-menu-item>
      <el-image
          style="width: 45px; height: 45px;line-height: 45px"
          :src="require('@/assets/logo.png')"
          fit="fill"
      ></el-image>
    </el-menu-item>
    <el-menu-item index="1" @click="changRouter('/')">首页</el-menu-item>
    <el-menu-item index="2" @click="changRouter('/article')">文章</el-menu-item>
    <el-sub-menu index="5" class="user" v-if="user.isLogin">
      <template #title class="el-sub-menu__title1">
        <el-avatar
            :src="user.avatar"
        ></el-avatar>
      </template>
      <el-menu-item index="5-1" @click="changRouter('/center')">
        个人中心
      </el-menu-item>
      <el-menu-item index="5-2">我的文章</el-menu-item>
      <el-menu-item index="5-3" @click="quitLogin">退出登陆</el-menu-item>
    </el-sub-menu>
    <el-menu-item class="user" v-else>
      <el-button type="text" @click="toLogin">登陆</el-button>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { defineComponent, ref, onMounted, reactive } from 'vue'
import { useStore } from 'vuex'
import router from '@/router'
import { getUser } from '@/api/user'

export default defineComponent({
  name: 'Navigation',
  setup () {
    const activeIndex = ref('1')
    const handleSelect = () => {
    }
    const store = useStore()
    const user = reactive(store.getters.getUser)
    const toLogin = () => {
      router.push('/login')
    }
    const getUserInfo = async () => {
      const userResp = await getUser()
      if (userResp.status !== 200 || userResp.data.code !== 0) {
        return
      }
      user.id = userResp.data.data.id
      user.nickname = userResp.data.data.nickname
      user.avatar = userResp.data.data.avatar
      user.phone = userResp.data.data.phone
      user.email = userResp.data.data.email
      user.description = userResp.data.data.description
      user.isLogin = true
      store.commit('setUser', user)
    }
    const quitLogin = () => {
      store.commit('setUser', {
        isLogin: false
      })
      user.id = 0
      user.nickname = ''
      user.avatar = ''
      user.phone = ''
      user.email = ''
      user.description = ''
      user.isLogin = false
      localStorage.removeItem('mkcsa-token')
    }
    onMounted(() => {
      if (localStorage.getItem('mkcsa-token')) {
        getUserInfo()
      }
    })
    const changRouter = (path) => {
      router.push(path)
    }
    return {
      activeIndex,
      handleSelect,
      user,
      toLogin,
      getUserInfo,
      quitLogin,
      changRouter
    }
  }
})
</script>

<style>
.el-menu-demo {
  width: 100% !important;
  padding: 0 32px;
}

.user {
  position: absolute;
  right: 0;
  margin-right: 32px !important;
  height: 60px;
  line-height: 60px;
}

.el-menu--popup {
  min-height: 60px !important;
  padding: 0 !important;
}

.el-menu--popup > li {
  height: 60px;
  line-height: 60px;
  width: 100%;
}

.el-menu--popup > .user {
  position: relative;
}

.el-menu--popup .el-sub-menu__title {
  width: 100% !important;
  height: 100% !important;
}
</style>
